import {uSelectQuickMakeList} from '@/api/dataOverview'
import {UtilButton} from '@/components/btn/utilBtn'
import {CCard} from '@/components/card'
import useLoading from '@/hooks/loading'
import {getUserId} from '@/libs/auth'
import {message} from '@/libs/global/antDesignVue'
import {
  toAlarmConfig,
  toDeviceShare,
  toLiveDataShow,
  toStandardConfig,
  toUserSetting
} from '@/libs/pageRedirect'

const QuicklyClickCardLayout = defineComponent({
  props: {
    loading: Boolean
  },
  setup(props, {slots}) {
    return () => (
      <CCard
        id='CBC-QuicklyClickCard'
        title='快捷操作'
        class='col-span-1 h-280 rounded-4 bg-white overflow-hidden'
        loading={props.loading}
        skeletonProps={{paragraph: {rows: 6}}}
      >
        <div class='w-full h-full flex flex-col'>{slots.default?.()}</div>
      </CCard>
    )
  }
})

export const QuicklyClickCard = defineComponent({
  setup(props, ctx) {
    const {startLoading, closeLoading, loading, isSuccess} = useLoading()
    const state = reactive<{
      quicklyClick: DataOverview.QuicklyClick | null
    }>({
      quicklyClick: null
    })

    function handleQiuickClick(dictCode: string) {
      switch (dictCode) {
        case '0165':
          toStandardConfig()
          break
        case '0166':
          toAlarmConfig()
          break
        case '0167':
          toDeviceShare()
          break
        case '0187':
          toLiveDataShow()
          break
        case '0168':
        case '0169':
          toUserSetting()
          break
        default:
          message.warning('开发中...')
          break
      }
    }

    function getQuicklyClick() {
      const userId = getUserId()
      if (!userId) return
      startLoading()
      uSelectQuickMakeList({userId})
        .then(res => {
          state.quicklyClick = res.data
          closeLoading(true)
        })
        .catch(err => {
          closeLoading(false)
        })
    }
    onMounted(() => {
      startLoading()
      getQuicklyClick()
    })
    return () =>
      loading.value ? (
        <QuicklyClickCardLoading></QuicklyClickCardLoading>
      ) : isSuccess.value ? (
        <QuicklyClickCardLayout>
          <div class='mt-32 px-36 grid grid-cols-4 gap-x-24 gap-y-24'>
            {state.quicklyClick?.map(item => (
              <UtilButton
                dictCode={item.dictCode}
                onClick={() => handleQiuickClick(item.dictCode)}
              ></UtilButton>
            ))}
          </div>
        </QuicklyClickCardLayout>
      ) : (
        <QuicklyClickCardEmpty></QuicklyClickCardEmpty>
      )
  }
})

export const QuicklyClickCardEmpty = defineComponent({
  setup() {
    return () => (
      <QuicklyClickCardLayout>
        <div class='w-full h-full flex items-center justify-center'>
          <a-empty description='数据获取失败' />
        </div>
      </QuicklyClickCardLayout>
    )
  }
})

export const QuicklyClickCardLoading = defineComponent({
  setup() {
    return () => <QuicklyClickCardLayout loading={true}></QuicklyClickCardLayout>
  }
})
